<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../images/favicon.ico">

    <title>洲博通 - Dashboard  Contact / Employee </title>
  
	<!-- Bootstrap 4.0-->
	<link rel="stylesheet" href="../../../assets/vendor_components/bootstrap/dist/css/bootstrap.min.css">
	
	<!-- iCheck -->
	<link rel="stylesheet" href="../../../assets/vendor_plugins/iCheck/flat/blue.css">
	
	<!-- Bootstrap extend-->
	<link rel="stylesheet" href="../../css/bootstrap-extend.css">

	<!-- Theme style -->
	<link rel="stylesheet" href="../../css/master_style.css">

	<!-- 洲博通 skins -->
	<link rel="stylesheet" href="../../css/skins/_all-skins.css">	

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->


</head>
<body class="sidebar-collapse skin-blue sidebar-mini">
  <b data-toggle="push-menu" style="display:none"></b>
<div class="wrapper">


  <aside class="main-sidebar"></aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Contact
      </h1>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="breadcrumb-item"><a href="#">Examples</a></li>
        <li class="breadcrumb-item active">Contact</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">

      <div class="row">
        <div class="col-lg-3 col-md-12">
			<div class="box">
				<div class="box-body">
				  <div class="contact-page-aside">
					<ul class="list-style-none font-size-16">
						<li class="box-label"><a href="javascript:void(0)">All Contacts <span>123</span></a></li>
						<li class="divider"></li>
						<li><a class="text-danger" href="javascript:void(0)">Work <span class="text-danger">103</span></a></li>
						<li><a class="text-warning" href="javascript:void(0)">Family <span class="text-warning">19</span></a></li>
						<li><a class="text-info" href="javascript:void(0)">Friends <span class="text-info">623</span></a></li>
						<li><a class="text-success" href="javascript:void(0)">Private <span class="text-success">53</span></a></li>
						<li class="box-label"><a href="javascript:void(0)" data-toggle="modal" data-target="#myModal" class="btn btn-success text-white mt-10">+ Create New Label</a></li>
						<div id="myModal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">
										<h4 class="modal-title" id="myModalLabel">Add Lable</h4>
										<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
									</div>
									<div class="modal-body">
										<from class="form-horizontal">
											<div class="form-group">
												<label class="col-md-12">Name of Label</label>
												<div class="col-md-12">
													<input type="text" class="form-control" placeholder="type name"> </div>
											</div>
											<div class="form-group">
												<label class="col-md-12">Select Number of people</label>
												<div class="col-md-12">
													<select class="form-control">
														<option>All Contacts</option>
														<option>10</option>
														<option>20</option>
														<option>30</option>
														<option>40</option>
														<option>Custome</option>
													</select>
												</div>
											</div>
										</from>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-success" data-dismiss="modal">Save</button>
										<button type="button" class="btn btn-default float-right" data-dismiss="modal">Cancel</button>
									</div>
								</div>
								<!-- /.modal-content -->
							</div>
							<!-- /.modal-dialog -->
						</div>
					</ul>
				</div>
			  </div>
            </div>
          <!-- /. box -->
        </div>
        <!-- /.col -->
        <div class="col-lg-9 col-md-12">
          <div class="box">
            <div class="box-body">
			  <div class="flexbox align-items-center p-15 bg-light">
				<div class="flexbox align-items-center">
				  <div class="custom-control custom-checkbox pl-0">
					<button type="button" class="btn btn-default btn-sm checkbox-toggle"><i class="ion ion-android-checkbox-outline-blank"></i></button>
				  </div>

				  <span class="divider-line mx-1"></span>

				  <div class="dropdown">
					<button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">Move to</button>
					<div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; top: 30px; left: 0px; will-change: top, left;">
					  <a class="dropdown-item" href="#"><span class="badge badge-ring badge-danger mr-1"></span> Work</a>
					  <a class="dropdown-item" href="#"><span class="badge badge-ring badge-warning mr-1"></span> Family</a>
					  <a class="dropdown-item" href="#"><span class="badge badge-ring badge-info mr-1"></span> Friends</a>
					  <a class="dropdown-item" href="#"><span class="badge badge-ring badge-success mr-1"></span> Private</a>
					</div>
				  </div>
				  <div class="dropdown d-none d-sm-block">
					<button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">Sort by</button>
					<div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; top: 30px; left: 0px; will-change: top, left;">
					  <a class="dropdown-item" href="#">Date</a>
					  <a class="dropdown-item" href="#">Name</a>
					  <a class="dropdown-item" href="#">Group</a>
					  <a class="dropdown-item" href="#">Popular</a>
					</div>
				  </div>
				</div>

				<div>
				  <div class="lookup lookup-circle lookup-right">
					<input type="text" data-provide="media-search">
				  </div>
				</div>
			  </div>
				
              <div class="media-list media-list-divided media-list-hover">

				<div class="media align-items-center">
				  <div class="custom-control custom-checkbox">
					<input type="checkbox" class="custom-control-input">
				  </div>

					<div class="app-contact-star"><a href="#"><i class="fa fa-star text-yellow"></i></a></div>

				  <span class="badge badge-dot badge-danger"></span>

				  <a class="flexbox flex-grow gap-items text-truncate" href="#qv-user-details" data-toggle="quickview">
					<img class="avatar" src="../../../images/avatar/1.jpg" alt="...">

					<div class="media-body text-truncate">
					  <h6>Hannah</h6>
					  <small>
						<span>hannah@gmail.com</span>
						<span class="divider-dash">(123) 456-7980</span>
					  </small>
					</div>
				  </a>

				  <div class="dropdown">
					<a class="text-lighter" href="#" data-toggle="dropdown"><i class="ti-more-alt rotate-90"></i></a>
					<div class="dropdown-menu dropdown-menu-right">
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-phone"></i> Call</a>
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-commenting"></i> Message</a>
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-envelope"></i> Email</a>
					  <div class="dropdown-divider"></div>
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-trash"></i> Delete</a>
					</div>
				  </div>
				</div>

				<div class="media align-items-center">
				  <div class="custom-control custom-checkbox">
					<input type="checkbox" class="custom-control-input">
				  </div>

				  <div class="app-contact-star"><a href="#"><i class="fa fa-star text-yellow"></i></a></div>

				  <span class="badge badge-dot badge-danger opacity-0"></span>

				  <a class="flexbox flex-grow gap-items text-truncate" href="#qv-user-details" data-toggle="quickview">
					<img class="avatar" src="../../../images/avatar/2.jpg" alt="...">

					<div class="media-body text-truncate">
					  <h6>Samuel</h6>
					  <small>
						<span>samuel@gmail.com</span>
						<span class="divider-dash">(256) 875-6579</span>
					  </small>
					</div>
				  </a>

				  <div class="dropdown">
					<a class="text-lighter" href="#" data-toggle="dropdown"><i class="ti-more-alt rotate-90"></i></a>
					<div class="dropdown-menu dropdown-menu-right">
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-phone"></i> Call</a>
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-commenting"></i> Message</a>
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-envelope"></i> Email</a>
					  <div class="dropdown-divider"></div>
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-trash"></i> Delete</a>
					</div>
				  </div>
				</div>

				<div class="media align-items-center">
				  <div class="custom-control custom-checkbox">
					<input type="checkbox" class="custom-control-input">
				  </div>

				 <div class="app-contact-star"> <a href="#"><i class="fa fa-star-o text-yellow"></i></a></div>

				  <span class="badge badge-dot badge-warning"></span>

				  <a class="flexbox flex-grow gap-items text-truncate" href="#qv-user-details" data-toggle="quickview">
					<img class="avatar" src="../../../images/avatar/3.jpg" alt="...">

					<div class="media-body text-truncate">
					  <h6>Caleb</h6>
					  <small>
						<span>caleb84@gmail.com</span>
						<span class="divider-dash">(123) 456-7890</span>
					  </small>
					</div>
				  </a>

				  <div class="dropdown">
					<a class="text-lighter" href="#" data-toggle="dropdown"><i class="ti-more-alt rotate-90"></i></a>
					<div class="dropdown-menu dropdown-menu-right">
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-phone"></i> Call</a>
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-commenting"></i> Message</a>
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-envelope"></i> Email</a>
					  <div class="dropdown-divider"></div>
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-trash"></i> Delete</a>
					</div>
				  </div>
				</div>

				<div class="media align-items-center">
				  <div class="custom-control custom-checkbox">
					<input type="checkbox" class="custom-control-input">
				  </div>

				  <div class="app-contact-star"><a href="#"><i class="fa fa-star-o text-yellow"></i></a></div>

				  <span class="badge badge-dot badge-danger opacity-0"></span>

				  <a class="flexbox flex-grow gap-items text-truncate" href="#qv-user-details" data-toggle="quickview">
					<img class="avatar" src="../../../images/avatar/4.jpg" alt="...">

					<div class="media-body text-truncate">
					  <h6>Isaac</h6>
					  <small>
						<span>isaac@gmail.com</span>
						<span class="divider-dash">(123) 456-7890</span>
					  </small>
					</div>
				  </a>

				  <div class="dropdown">
					<a class="text-lighter" href="#" data-toggle="dropdown"><i class="ti-more-alt rotate-90"></i></a>
					<div class="dropdown-menu dropdown-menu-right">
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-phone"></i> Call</a>
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-commenting"></i> Message</a>
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-envelope"></i> Email</a>
					  <div class="dropdown-divider"></div>
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-trash"></i> Delete</a>
					</div>
				  </div>
				</div>

				<div class="media align-items-center">
				  <div class="custom-control custom-checkbox">
					<input type="checkbox" class="custom-control-input">
				  </div>

				  <div class="app-contact-star"><a href="#"><i class="fa fa-star text-yellow"></i></a></div>

				  <span class="badge badge-dot badge-info"></span>

				  <a class="flexbox flex-grow gap-items text-truncate" href="#qv-user-details" data-toggle="quickview">
					<img class="avatar" src="../../../images/avatar/default.jpg" alt="...">

					<div class="media-body text-truncate">
					  <h6>Luke</h6>
					  <small>
						<span>luke@gmail.com</span>
						<span class="divider-dash">(123) 456-7890</span>
					  </small>
					</div>
				  </a>

				  <div class="dropdown">
					<a class="text-lighter" href="#" data-toggle="dropdown"><i class="ti-more-alt rotate-90"></i></a>
					<div class="dropdown-menu dropdown-menu-right">
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-phone"></i> Call</a>
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-commenting"></i> Message</a>
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-envelope"></i> Email</a>
					  <div class="dropdown-divider"></div>
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-trash"></i> Delete</a>
					</div>
				  </div>
				</div>

				<div class="media align-items-center">
				  <div class="custom-control custom-checkbox">
					<input type="checkbox" class="custom-control-input">
				  </div>

				  <div class="app-contact-star"><a href="#"><i class="fa fa-star text-yellow"></i></a></div>

				  <span class="badge badge-dot badge-info"></span>

				  <a class="flexbox flex-grow gap-items text-truncate" href="#qv-user-details" data-toggle="quickview">
					<img class="avatar" src="../../../images/avatar/5.jpg" alt="...">

					<div class="media-body text-truncate">
					  <h6>Isaiah</h6>
					  <small>
						<span>isaiah@gmail.com</span>
						<span class="divider-dash">(123) 456-7890</span>
					  </small>
					</div>
				  </a>

				  <div class="dropdown">
					<a class="text-lighter" href="#" data-toggle="dropdown"><i class="ti-more-alt rotate-90"></i></a>
					<div class="dropdown-menu dropdown-menu-right">
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-phone"></i> Call</a>
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-commenting"></i> Message</a>
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-envelope"></i> Email</a>
					  <div class="dropdown-divider"></div>
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-trash"></i> Delete</a>
					</div>
				  </div>
				</div>

				<div class="media align-items-center">
				  <div class="custom-control custom-checkbox">
					<input type="checkbox" class="custom-control-input">
				  </div>

				  <div class="app-contact-star"><a href="#"><i class="fa fa-star-o text-yellow"></i></a></div>

				  <span class="badge badge-dot badge-danger opacity-0"></span>

				  <a class="flexbox flex-grow gap-items text-truncate" href="#qv-user-details" data-toggle="quickview">
					<img class="avatar" src="../../../images/avatar/6.jpg" alt="...">

					<div class="media-body text-truncate">
					  <h6>Brandon</h6>
					  <small>
						<span>brandon@gmail.com</span>
						<span class="divider-dash">(123) 456-7890</span>
					  </small>
					</div>
				  </a>

				  <div class="dropdown">
					<a class="text-lighter" href="#" data-toggle="dropdown"><i class="ti-more-alt rotate-90"></i></a>
					<div class="dropdown-menu dropdown-menu-right">
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-phone"></i> Call</a>
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-commenting"></i> Message</a>
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-envelope"></i> Email</a>
					  <div class="dropdown-divider"></div>
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-trash"></i> Delete</a>
					</div>
				  </div>
				</div>

				<div class="media align-items-center">
				  <div class="custom-control custom-checkbox">
					<input type="checkbox" class="custom-control-input">
				  </div>

				  <div class="app-contact-star"><a href="#"><i class="fa fa-star text-yellow"></i></a></div>

				  <span class="badge badge-dot badge-success"></span>

				  <a class="flexbox flex-grow gap-items text-truncate" href="#qv-user-details" data-toggle="quickview">
					<img class="avatar" src="../../../images/avatar/8.jpg" alt="...">

					<div class="media-body text-truncate">
					  <h6>Aaron</h6>
					  <small>
						<span>aaron@gmail.com</span>
						<span class="divider-dash">(123) 456-7890</span>
					  </small>
					</div>
				  </a>

				  <div class="dropdown">
					<a class="text-lighter" href="#" data-toggle="dropdown"><i class="ti-more-alt rotate-90"></i></a>
					<div class="dropdown-menu dropdown-menu-right">
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-phone"></i> Call</a>
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-commenting"></i> Message</a>
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-envelope"></i> Email</a>
					  <div class="dropdown-divider"></div>
					  <a class="dropdown-item" href="#"><i class="fa fa-fw fa-trash"></i> Delete</a>
					</div>
				  </div>
				</div>

			  </div>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /. box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->

    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
 

</div>
<!-- ./wrapper -->

	<!-- jQuery 3 -->
	<script src="../../../assets/vendor_components/jquery/dist/jquery.min.js"></script>
	
	<!-- popper -->
	<script src="../../../assets/vendor_components/popper/dist/popper.min.js"></script>
	
	<!-- Bootstrap 4.0-->
	<script src="../../../assets/vendor_components/bootstrap/dist/js/bootstrap.min.js"></script>
	
	<!-- jQuery UI 1.11.4 -->
	<script src="../../../assets/vendor_components/jquery-ui/jquery-ui.min.js"></script>
	
	<!-- SlimScroll -->
	<script src="../../../assets/vendor_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
	
	<!-- FastClick -->
	<script src="../../../assets/vendor_components/fastclick/lib/fastclick.js"></script>
	
	<!-- iCheck -->
	<script src="../../../assets/vendor_plugins/iCheck/icheck.js"></script>
	
	<!-- 洲博通 App -->
	<script src="../../js/template.js"></script>
	
	<!-- 洲博通 for demo purposes -->
	<script src="../../js/demo.js"></script>
	
	<!-- 洲博通 for demo purposes -->
	<script src="../../js/pages/app-contact.js"></script>
	
	
</body>
</html>
